<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AnimationLearning</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <script src="../js/bootstrap.js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/font-awesome-4.7.0/css/font-awesome.min.css"/>
    <style type="text/css">
        .container img:hover{
            transform: scale(1.1,1.1);
        }
    </style>
</head>
<body>
<!--这一页将学习使用CSS3的动画-->
  <div class="container pt-5">
      <div class="row">
          <div class="col-md-4">
              <img class="w-100" src="../picture/blue.png" alt="firstPicture">
          </div>
          <div class="col-md-4">
              <img class="w-100" src="../picture/pepper.png" alt="firstPicture">
          </div>
          <div class="col-md-4">
              <img class="w-100" src="../picture/yellowRed.png" alt="firstPicture">
          </div>
      </div>
  </div>
  <div>
      <!--fadeIn / fadeOut / fadeToggle / fadeTo-->
      <button id="button-test" class="btn btn-primary mt-5">FadeToggle</button>
      <button class="btn btn-primary mt-5">Fadein</button>
      <div class="test-0">some content-0</div>
      <div class="test-1">some content-1</div>
      <div class="test-2">some content-2</div>
      <div class="test-3">some content-3</div>

      <!--slideDown / slideUp / slideToggle-->
      <button id="test-2" class="btn btn-primary mt-5">Fadein</button>
      <div id="slide-test" style="height: 200px; width: 200px; background-color:#000000; color: #ffffff;">12</div>
  </div>
  <script>
      // console.log($("button"));
      // 有个eq（）方法来筛选
      $("#button-test").click(function () {
          $(".test-0").fadeToggle();
          $(".test-1").fadeToggle('slow');
          $(".test-2").fadeToggle(2000);
          $(".test-3").fadeTo('slow', 0.5);
      });

      $("#test-2").click(function () {
          $("#slide-test").slideToggle();
      })

  //  与原生的js不同的是，jQuery直接获取元素的值，无需使用等号（=），
  //    要修改值，则只需在括号中完成("name", "value")
  </script>
</body>
</html>
